<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>登录</title>
 <link rel="stylesheet" href="css/login.css">
 <style>
  body {
    background: url("./img copy/003.png") no-repeat center center fixed;
    background-size: cover;
    font-family: 'Arial', sans-serif;
    color: #333;
  }
  主体区, .登录框 {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  h2 {
    text-align: center;
    color: #555;
  }
  input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  input[type="submit"]:hover {
    background-color: #0056b3;
  }
  .forgot-password, .register {
    text-align: center;
    margin-top: 10px;
  }
  .method {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.method img {
  width: 20px;
  margin-right: 10px;
}

.method:hover {
  background-color: #f5f5f5;
}
 </style>
</head>
<body>
   <div class="主体区">
    <div class="登录框">
     <form action="web2.html" method="post">
      <h2>登录</h2>
      <div>
       <span>用户名</span>
       <input type="text" class="text" name="username" placeholder="请输入用户名" required>
      </div>
      <div>
       <span>密码</span>
       <input type="password" class="text" name="password" placeholder="请输入密码" required>
      </div>
      <div>
       <input type="checkbox" name="remember"> 两周内自动登录
      </div>
      <div>
       <input type="submit" class="提交" value="登录" onclick="web.html">
      </div>
      <div class="forgot-password">
       忘记密码
      </div>
      <div class="register">
       立即注册
      </div>
      <div class="login-methods">
         <div class="method" onclick="loginWithQQ()"><img src="./img copy/002.png" alt="QQ登录"> QQ登录</div>
         <div class="method" onclick="loginWithWeChat()"><img src="./img copy/001.png" alt="微信登录"> 微信登录</div>
         <div class="method" onclick="loginWithPhone()"><img src="img copy/004.png" alt="手机号登录"> 手机号登录</div>
       </div>
     </form>
    </div>
   </div>
   <script>
   function loginWithQQ() {
     // 实际的QQ登录逻辑
     console.log("QQ登录");
   }
   
   function loginWithWeChat() {
     // 实际的微信登录逻辑
     console.log("微信登录");
   }
   
   function loginWithPhone() {
     // 实际的手机号登录逻辑
     console.log("手机号登录");
   }
   </script>
   <style>
   /* 其他样式保持不变 */
   
   .login-methods {
     margin-top: 20px;
     text-align: center;
   }
   
   .method {
     display: inline-block;
     margin: 5px;
     padding: 10px 15px;
     border: 1px solid #ddd;
     border-radius: 4px;
     cursor: pointer;
     background-color: #f8f8f8;
     color: #333;
     font-size: 16px;
     text-decoration: none;
     transition: background-color 0.3s ease;
   }
   
   .method:hover {
     background-color: #eaeaea;
   }
   
   .method img {
     width: 24px;
     margin-right: 8px;
     vertical-align: middle;
   }
   </style>
   </body>
</html>